<template>
	<view>
		<image class="bgImg" src="/static/lock/bg.png"></image>
		<view class="box">
			<view v-for="(item,index) in list" :key="index" class="pt-40">
				<view class="flex">
					<u-badge bgColor="#FF0A0D" isDot></u-badge>
					<view class="subTitle ml-20">{{item.filename}}</view>
				</view>
				<view class="flex flexSbetween mt-10">
					<input disabled class="left"
						v-model="FileUrl+item.serial_no" />
					<view class="copyBtn" @click="copy(item.serial_no)">复制分享链接</view>
				</view>
			</view>

			<view class="code flex flexJusCenter" v-if="this.list.length == 1">
				<image class="codeBg" src="/static/lock/codeBg.png"></image>
				<view class="codeImg">
					<canvas class="codeImg" canvas-id="qrcode" v-show="uqrShow" @click="prview" />
				</view>
			</view>
			<view class="hint" v-if="this.list.length == 1">将二维码分享给好友 对方扫一扫即可阅览</view>
		</view>
		<view class="flex flexSbetween btn">
			<view class="copy" @click="copyAll">一键复制</view>
			<view class="btnLeft" @click="back">继续加密</view>
			<view class="btnRight" @click="myFile">管理我的文档</view>
		</view>
	</view>
</template>

<script>
	import uqrCode from "@/common/uqrcode.js"
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				list: [],
				uqrShow: false,
				fileImg:''
			}
		},
		onLoad(option) {
			if (option) {
				let data = JSON.parse(option.data)
				this.list = data
			}
			if (this.list.length == 1) {
				this.getCode()
			}
		},
		methods: {
			copyAll(){
				var arr = this.list.map(item=>{
						return item.filename + '一' +this.FileUrl + item.serial_no + '\n'
				})
				uni.setClipboardData({
					data: arr.join('')
				})
			},
			copy(code) {
				uni.setClipboardData({
					data: this.FileUrl + code
				})
			},
			back() {
				uni.switchTab({
					url: '/pages/lock/lock'
				})
			},
			myFile() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			getCode() {
				var fileUrl = this.FileUrl
				this.uqrShow = true
				uqrCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: fileUrl + this.list[0].serial_no,
					size: 120.5,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uqrCode.errorCorrectLevel.H,
					success: res => {
						uni.canvasToTempFilePath({
							x:0,
							y:0,
							width:120,
							height:120,
							destWidth: 140,
							destHeight: 140,
							canvasId: 'qrcode',
							success: (data) => {
								// 在H5平台下，tempFilePath 为 base64
								console.log(data, 123)
								this.toImgBase64(data.tempFilePath)
							},
							fail: err => {
								console.log(err, 345)
							}
						})
					}
				})
			},
			// 文件二维码图片base64转为图片地址
			toImgBase64(data) {
				base64ToPath(data)
					.then(path => {
						console.log(path)
						this.fileImg = path
					})
					.catch(error => {
						console.error(error)
					})
			},
			// 预览文件二维码图片
			prview() {
				uni.previewImage({
					current:this.fileImg,
					urls: this.fileImg.split(','),
					success: res => {
						console.log(res)
					},
					fail: err => {
						console.log(err)
					}
				})
			},
		}
	}
</script>

<style>
	.bgImg {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100%;
		z-index: -1;
	}

	.box {
		background: #fff;
		box-shadow: 0rpx 4rpx 17rpx 7rpx rgba(254, 0, 0, 0.08);
		padding: 0rpx 30rpx 40rpx 30rpx;
		margin: 30rpx;
		border-radius: 15rpx;
	}

	.subTitle {
		font-size: 28rpx;
	}

	.left {
		border: 2px solid rgba(0, 0, 0, 0.24);
		border-radius: 20rpx;
		padding: 20rpx;
		flex: 1;
		font-size: 26rpx;
	}

	.copyBtn {
		background: #FE0000;
		border-radius: 20rpx;
		color: #fff;
		padding: 20rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.code {
		margin: 70rpx 0;
		position: relative;
		left: 0;
		right: 0;
	}

	.codeBg {
		width: 274rpx;
		height: 277rpx;
		position: relative;
		left: 0;
		right: 0;
	}

	.codeImg {
		width: 241rpx;
		height: 244rpx;
		position: absolute;
	}

	.hint {
		font-size: 28rpx;
		color: #202020;
		text-align: center;
		margin: 0 180rpx;
	}
	.copy{
		border: 4rpx solid #FE0000;
		background: #fff;
		border-radius: 50rpx;
		padding: 18rpx 40rpx;
		font-size: 28rpx;
		color: #FE0000;
	}
	.btnLeft {
		background: #FE0000;
		border-radius: 50rpx;
		padding: 18rpx 40rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.btnRight {
		background: #fff;
		border-radius: 50rpx;
		padding: 18rpx 40rpx;
		font-size: 28rpx;
		color: #000;
	}

	.btn {
		margin: 80rpx 30rpx 30rpx;
	}
</style>